<?php
/*
 * 获取得到的障碍物坐标，题目没有说可以任意
 * 新建一个5列8行的二位数组，然后计算最短路径
 */

$x = 8;
$y = 5;
$array = array();

//填充数组
for ($index = 0; $index < $x; $index++) {
    for ($index1 = 0; $index1 < $y; $index1++) {
        $array[$index][$index1] = 0;
    }
}

$start_x = 0;
$start_y = 0;
$end_x = $x - 1;
$end_y = $y - 1;


//最开始的是A，最后是B
$start = $array[$start_x][$start_y] = 'A';
$end = $array[$end_x][$end_y] = 'B';
?>
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="utf-8"> 
        <title>ZX</title>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

        <table class="table table-bordered" style="width: 50%;margin: 50px;">
            <caption>最短路径</caption>

            <tbody>
                <?php foreach ($array as $k => $v) { ?>
                    <tr>
                        <?php foreach ($v as $key => $value) { ?>
                            <td  class="zx"  rel="<?php echo $k . '|' . $key; ?>"> <?php
                                if ($value === 0) {
                                    echo '&nbsp;&nbsp;&nbsp;';
                                } else {
                                    echo $value;
                                }
                                ?></td>
                        <?php } ?>
                    </tr>
                <?php } ?>
            </tbody>
        </table>
        <a  class="btn btn-primary btn-lg active" id="sk" role="button" style="margin: 50px;">提交</a>
    </body>


    <script type="text/javascript">

        $(document).ready(function () {
            var ids = new Array();
            $(document).on('click', '[class=zx]', function () {

                var id = $(this).attr('rel');
                if (id === "<?php echo ($start_x) . '|' . ($start_y); ?>" || id === "<?php echo ($end_x) . '|' . ($end_y); ?>") {
                    alert('不能选择');
                } else {

                    if (colorRGB2Hex($(this).css("background-color")) === "#324658") {
                        $(this).css("background-color", "#FFFFFF");

                        for (var i = 0; i < ids.length; i++) {//删除取消的元素
                            if (ids[i] == id) {
                                ids.splice(i, 1);
                            }
                        }

                    } else {
                        $(this).css("background-color", "#324658");
                        ids.push(id);
                    }

                }
                console.log(ids);
            });
            $('#sk').click(function () {
                $.ajax({
                    url: "maze.php",
                    data: {
                        ids: ids,
                    },
                    type: 'post',
                    cache: false,
                    success: function (msg) {
                        alert(msg);
                    }
                });


            });



            function colorRGB2Hex(color) {
                var rgb = color.split(',');
                var r = parseInt(rgb[0].split('(')[1]);
                var g = parseInt(rgb[1]);
                var b = parseInt(rgb[2].split(')')[0]);

                var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
                return hex;
            }

        });

    </script>

</html>